<template>
    <div class="app-container home">
        <div class="content_top">
            <div class="img_top" ref="poster">
                <img :src="activeImg" alt="" />
                <div
                    class="code"
                    :class="
                        activeImg === share_one
                            ? 'code_one'
                            : activeImg === share_two
                            ? 'code_two'
                            : activeImg === share_three
                            ? 'code_three'
                            : 'code_one'
                    "
                >
                    <qrcode-vue :value="codeUrl" :size="80"></qrcode-vue>
                </div>
            </div>
            <div class="btn_top">
                <van-button round block @click="goDown" type="primary">保存图片</van-button>
            </div>
        </div>
        <div class="content_bottom">
            <div class="content_bottom_img">
                <div class="share_Bg share_Bg_one" :class="activeImg === share_one ? 'active' : ''" @click="changeImg(share_one)">
                    <img :src="share_one" alt="" />
                </div>
                <div class="share_Bg share_Bg_two" :class="activeImg === share_two ? 'active' : ''" @click="changeImg(share_two)">
                    <img :src="share_two" alt="" />
                </div>
                <div class="share_Bg share_Bg_three" :class="activeImg === share_three ? 'active' : ''" @click="changeImg(share_three)">
                    <img :src="share_three" alt="" />
                </div>
            </div>
            <div class="schedule">
                <div
                    class="color_Bg"
                    :style="
                        activeImg === share_one
                            ? 'left:0'
                            : activeImg === share_two
                            ? 'left:33.33333%'
                            : activeImg === share_three
                            ? 'left:66.66666%'
                            : 'left:0%'
                    "
                ></div>
            </div>
        </div>
    </div>
</template>

<script setup name="Share">
import A_LS from '@/assets/share_one.png'
import A_HLB from '@/assets/share_one_hlb.png'
import B_LS from '@/assets/share_two.png'
import B_HLB from '@/assets/share_two_hlb.png'
import C_LS from '@/assets/share_three.png'
import C_HLB from '@/assets/share_three_hlb.png'

import QrcodeVue from 'qrcode.vue'
import html2canvas from 'html2canvas'
import { showToast, showSuccessToast, showConfirmDialog } from 'vant'
import { useRoute } from 'vue-router'
import store from '../../store'

const route = useRoute()

let share_one = ref(A_LS)
let share_two = ref(B_LS)
let share_three = ref(C_LS)
let codeUrl = ref('')
let activeImg = ref('')
// 绑定  需要把那个内容生成图片
const poster = ref()

codeUrl.value = `https://open.lianzhongbao.cn:18091/shareregister?shareCode=${route.query.inviterCode}&appVersion=1.0.0&agencySource=${store.state.user.userInfo.agentBean.agencySource}`
// codeUrl.value = `http://192.168.0.186:8999/shareregister?shareCode=${route.query.inviterCode}&appVersion=1.0.0&agencySource=${store.state.user.userInfo.agentBean.agencySource}`
if (store.state.user.userInfo.agentBean.agencySource === 'HLB') {
    share_one.value = A_HLB
    share_two.value = B_HLB
    share_three.value = C_HLB
}

activeImg.value = share_one.value

const goDown = () => {
    // document.querySelector() document.getElementById
    // html2canvas(绑定的元素,{})
    // 海报图默认是  2倍尺寸
    html2canvas(poster.value, {
        backgroundColor: '#f5f5f5', //海报的背景颜色
        useCORS: true // 允许跨域
    }).then(canvas => {
        // canvas 其实就是我们所讲的res 的意思 返回报文的意思
        let baseImg = canvas.toDataURL('image/png')
        showConfirmDialog({
            title: '分享下载',
            message: '确定下载当前分享图至相册嘛？'
        })
            .then(() => {
                saveImgFile(baseImg)
            })
            .catch(() => {})
    })
}
const saveImgFile = baseImg => {
    const bitmap = new plus.nativeObj.Bitmap('test')
    bitmap.loadBase64Data(
        baseImg,
        function () {
            const url = '_doc/' + new Date().getTime() + '.png' // url为时间戳命名方式
            bitmap.save(
                url,
                {
                    overwrite: true // 是否覆盖
                },
                i => {
                    plus.gallery.save(
                        i.target,
                        function () {
                            console.log('图片保存至相册成功')
                            showSuccessToast('图片保存至相册成功')
                            bitmap.clear()
                        },
                        function (e) {
                            showToast('图片保存至相册失败')
                            console.log('图片保存至相册失败:' + JSON.stringify(e))
                            bitmap.clear()
                        }
                    )
                },
                e => {
                    console.log('图片保存失败1')
                    showToast('图片保存失败1')
                    bitmap.clear()
                }
            )
        },
        e => {
            console.log('图片保存失败2')
            showToast('图片保存失败2')
            bitmap.clear()
        }
    )
}
const changeImg = img => {
    console.log(img)

    activeImg.value = img

    console.log(activeImg.value)
}
</script>

<style scoped lang="scss">
.app-container {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;

    .content_top {
        flex: 1;
        padding: 10px 48px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;

        .img_top {
            text-align: center;
            width: 280px;
            position: relative;

            img {
                height: 520px;
                width: 280px;
                max-width: 280px;
            }

            .code_one {
                position: absolute;
                bottom: 10px;
                left: 50%;
                transform: translate(-50%, 0);
            }

            .code_two {
                position: absolute;
                bottom: 10px;
                right: 10px;
            }

            .code_three {
                position: absolute;
                bottom: 15px;
                right: 10px;
            }
        }

        .btn_top {
            width: 100%;
            margin-top: 10px;
            flex-shrink: 0;
        }
    }

    .content_bottom {
        padding: 20px 80px;
        background: #ffffff;
        min-height: 122px;

        .content_bottom_img {
            flex-shrink: 0;
            opacity: 1;
            border-radius: 0px;
            display: flex;
            justify-content: space-between;

            .share_Bg {
                height: 70px;
                filter: blur(1px);
                width: 33.3333%;
                text-align: center;

                img {
                    box-shadow: rgb(255, 255, 255) 0px 0px 12px 5px;
                    height: 100%;
                }
            }

            .active {
                filter: blur(0px);

                img {
                    box-shadow: rgb(255, 187, 0) 0px 0px 12px 3px;
                }
            }
        }

        .schedule {
            width: 60px;
            height: 3px;
            background: #dfdfdf;
            opacity: 1;
            border-radius: 1px;
            margin: 0 auto;
            position: relative;
            margin-top: 20px;

            .color_Bg {
                position: absolute;
                left: 0%;
                top: 0;
                height: 100%;
                width: 33.33333%;
                background: #266eff;
                opacity: 1;
                border-radius: 1px;
                transition: left 0.3s;
            }
        }
    }
}
</style>
